今天要來講一下節點之間的兄弟關係與父子關係還有該如何抓取

兄弟關係也就是同一層的節點
父子關係也就是節點的上一層像是

<div id="爸爸">
    <p>兄弟</p>
    <p>兄弟</p>
</div>

firstChild

是可以選擇到第一個子節點，如果沒有子節點就會回傳null，這邊切記，空白節點也算是子節點喔!所以如果標籤之間有空白那firstChild會選到空白

<div id="ck">
  <p>1</p>
  <p>2</p>
</div>

var ck = document.querySelector('#ck')
console.log(ck.firstChild.textContent) //空白

但如果是這樣的話就能正確選到第一個p

<div id="ck"><p>1</p><p>2</p></div>

var ck = document.querySelector('#ck')
console.log(ck.firstChild.textContent) //1

lastChild

與第一個相反他是可以選擇到最後一個子節點，一樣沒有的話會回傳null、如果中間有空白一樣會選到空白節點

<div id="ck">
  <p>1</p>
  <p>2</p>
</div>

var ck = document.querySelector('#ck')
console.log(ck.firstChild.textContent) //空白

但如果是這樣的話就能正確選到第二個p

<div id="ck"><p>1</p><p>2</p></div>

var ck = document.querySelector('#ck')
console.log(ck.firstChild.textContent) //2

parentNode

與Child比起來這個理解起來更簡單，就是拿到父節點!會一直往上找最後找到根節點。

<div id="ck">
  <p class="first">1</p>
  <p>2</p>
</div>

var p = document.querySelector('.first')
console.log(p.parentNode.tagName) //印出"DIV"

previousSibling

剛剛講完父子關係現在可以來講一下兄弟關係，previousSibling可以選擇到前一個兄弟節點，若本身就是第一個那麼就會回傳null，那一樣如果有空白節點的畫，一樣會把空白節點當第一個喔!

<div id="ck"><p>1</p><p class="sec">2</p></div>

var p = document.querySelector('.sec')
console.log(p.previousSibling.textContent) // 印出1

nextSibling

與previousSibling相反，選擇到下一個兄弟節點，如果本身就是最後一個，就會回傳null，且一樣會選擇到空白節點

<div id="ck"><p class="first">1</p><p>2</p></div>

var p = document.querySelector('.first')
console.log(p.previousSibling.textContent) // 印出2

這幾個選取節點的方式算蠻常在實戰中應用的，像是做拖拉效果或是產生下一個節點等等都會應用到，不過也算蠻簡單學的!今天就說到這邊大家明天見!